<template>
    <!-- <h2 id="title2">你好</h2> 这里的id会和Person里的id重复 -->
    <h2 ref="title2">你好</h2> <!-- 使用ref代替id就可以解决上面的id重复问题 -->
    <button @click="showLog">点我输出h2</button>
    <Person ref="ren"/>
    <button @click="showPerson">点我输出Person</button>
</template>

<script lang="ts" setup name="App">
    import { ref } from 'vue';
    import Person from './components/Person.vue';

    let title2 = ref();
    let ren = ref();

    function showLog() {
        // 这里拿到的是dom元素
        console.log(title2.value);
    }

    function showPerson() {
        // 这里拿到的是Person实例
        console.log(ren.value);
    }
</script>
